<template>
  <base-layout>
    <template #searchPanel>
      <el-row>
        <el-col :span="12">客户信息</el-col>
        <el-divider content-position="center"></el-divider>
      </el-row>
      <form-create v-model="cusutomerFormModel" :rule="rule" :option="option" />
    </template>

    <template #contentPanel>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <template v-for="(item,key) of tableList">
        <el-tab-pane :label="names[key]" :name="key" :key="key">
          <data-table
            :value="item"
            :has-action="false"
            :table-column-attributes="tableColumnAttributes[key]"
            :width="160"
            :isShowPage="false"
          />

        </el-tab-pane>
        </template>
     <!--   <el-tab-pane label="跟进" name="third">
          <data-table
            :value="tableList.followUp"
            :has-action="false"
            :table-column-attributes="tableColumnAttributes.followUp"
            :width="160"
            :isShowPage="false"
          />
        </el-tab-pane>
        <el-tab-pane label="邀约" name="fourth">
          <data-table
            :value="tableList.invitation"
            :has-action="false"
            :table-column-attributes="tableColumnAttributes.invitation"
            :width="160"
            :isShowPage="false"
          />
        </el-tab-pane>
        <el-tab-pane label="到店" name="five">
          <data-table
            :value="tableList.toTheStore"
            :has-action="false"
            :table-column-attributes="tableColumnAttributes.toTheStore"
            :width="160"
            :isShowPage="false"
          />
        </el-tab-pane>
        <el-tab-pane label="成交" name="six">
          <data-table
            :value="tableList.deal"
            :has-action="false"
            :table-column-attributes="tableColumnAttributes.deal"
            :width="160"
            :isShowPage="false"
          />
        </el-tab-pane>
        <el-tab-pane label="战败" name="seven">
          <data-table
            :value="tableList.defeat"
            :has-action="false"
            :table-column-attributes="tableColumnAttributes.defeat"
            :width="160"
            :isShowPage="false"
          />
        </el-tab-pane>
        <el-tab-pane label="乘车试驾" name="eight"></el-tab-pane>
          -->
      </el-tabs>

      <el-row>
        <el-col :span="24" align="right">
          <el-button
            type="primary"
            :disabled="disabledType"
            @click="saveUpdate()"
            >保存</el-button
          >
        </el-col>
      </el-row>
    </template>
  </base-layout>
</template>

<script>
import { indexApis } from '@/api/pre-sale/intentionalCustomer'
import tableColumnAttributes from './data'
import baseMixin from '@/mixins/base'
import { parseTimeToYMDHMS } from '@/utils'
import UploadImage from '@/components/UploadImage'
import { getDict } from '@/utils/index'
import { rulesForm } from './rules'
import { mapGetters } from 'vuex'
import { transferLabelAndValue } from '@/utils/pre-sale'
export default {
  props: ['id'],
  name: 'editCustomerManage',
  components: {
    UploadImage,
  },
  mixins: [
    baseMixin({
      format(res) {
        return res.map((data) => {
          return data
        })
      },
    }),
  ],
  computed: {
    ...mapGetters(['stores', 'storesCalue']),
  },
  data() {
    return {
      tableList: {
        boutique:[],
        followUp: [],
        invitation: [],
        toTheStore: [],
        deal: [],
        defeat: [],
        trailDrive:[]
      },
      names: {
        boutique:'我的精品',
        deal: '成交',
        defeat: '战败',
        followUp: '跟进',
        invitation: '邀约',
        toTheStore: '到店',
        trailDrive:'乘车试驾'
      },
      cusutomerFormModel: {},
      rule: rulesForm,
      option: {
        //显示表单重置按钮
        resetBtn: false,
        submitBtn: false,
      },
      activeName: 'boutique',
      currentPage: 0,
      pageSize: 5,
      totalCount: 0,
      dialogWidth: '1200px',
      disabledType: false,
      tableDataList: [],
      dict: {},
      getDict,
      tableColumnAttributes,
      filters: {},
      // rules: rules,
      currentCar: {},
      type: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        },
      },
    }
  },
  async mounted() {
    this.dict = getDict(
      ['客户级别', '性别', '来源渠道', '客户会员等级'],
      '',
      true
    )
    this.cusutomerFormModel.updateRule('storeId', {
      options: transferLabelAndValue(this.stores, ['storeName', 'id']),
    })
    this.intentiongDetail()
  },

  methods: {
    handleClick() {},
    saveUpdate() {
      this.cusutomerFormModel.submit(async (formData) => {
        await indexApis.intentiongSupplement({ ...this.result, ...formData })
        this.$router.push({ name: 'customerlist' })
      })
    },
    async intentiongDetail() {
      const { data, success } = await indexApis.intentiongDetail(this.id)
      if (success) {
        this.$nextTick(() => {
          data.firstDriveLicenseDate = data.firstDriveLicenseDate
            ? data.firstDriveLicenseDate + ' 00:00:00'
            : ''
          this.result = data
          this.cusutomerFormModel.setValue(data)
        })
      }
      const { data: list } = await indexApis.intentiongYYFindAll(this.id)
      const {data:record}=await indexApis.intentiongTestDriveRecord(this.id)
      const {data:brand}=await indexApis.intentiongMyBrand(this.id)
      this.getCustomerList(0, 'followUp')
      this.getCustomerList(1, 'toTheStore')
      this.getCustomerList(2, 'deal')
      this.getCustomerList(3, 'defeat')
      this.tableList['invitation'] = list
      this.tableList['trailDrive']=record;
      this.tableList['boutique']=brand;
    },
    editCarInfo(row, type) {
      this.currentCar = row
      this.type = type
      this.dialogVisible = true
    },
    deleteCarInfo(row) {
      this.filters.cars = this.filters.cars.filter((e) => e != row)
    },
    //获取列表数据
    async getCustomerList(type, tableKey) {
      const { data, success } = await indexApis.intentiongGJFindAll({
        intentionId: this.id,
        type,
      })
      if (success) {
        this.tableList[tableKey] = data
      }
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
